在前端开发中，我们总是在追求极致的性能。Vue.js 从诞生之初就以其出色的性能和友好的开发体验赢得了开发者的青睐。到了 Vue 3，它在性能优化上更是迈出了一大步，而这背后的核心功臣之一，就是其强大的编译优化能力。

简单来说，编译优化就是 Vue 的编译器在将我们写的模板（template）转换成渲染函数（render function）时，尽可能地分析和提取模板中的信息，然后生成最高效的代码。这个过程就像一位聪明的厨师，在拿到菜谱（模板）后，不是机械地按部就班，而是提前规划好哪些菜可以先准备（静态内容），哪些需要现炒（动态内容），从而大大缩短上菜时间。

接下来，我们就来一探究竟，看看 Vue 3 到底用了哪些“黑魔法”来提升性能。

#告别“地毯式”搜索：动态节点收集与补丁标志

想象一下传统的虚拟 DOM（Virtual DOM）更新方式，也就是我们常说的 Diff 算法。当数据变化时，它需要生成一棵新的虚拟 DOM 树，然后和旧树进行“地毯式”的逐层对比，找出差异再更新到真实 DOM 上。

比如下面这个模板：

<div id="foo">
  <p class="bar">{{ text }}</p>
</div>

这里唯一可能变化的就是 {{ text }} 的内容。理想情况下，我们应该直接找到这个 p 标签，更新它的文本就行了。但传统 Diff 算法做不到，它会：

1. 对比 div 节点及其属性。
2. 对比 p 节点及其属性。
3. 对比 p 标签里的文本节点，发现变了，更新它。

这里面有很多不必要的对比操作。如果模板结构更复杂，这种性能浪费会更严重。

Vue 3 的思路是：在编译时就告诉你什么会变，什么不会变。

#Block 与 PatchFlags：给动态内容打上“标签”

Vue 3 的编译器在分析模板后，会给动态的节点打上一个特殊的标记，叫做 patchFlag（补丁标志）。它就是一个数字，不同的数字代表不同的动态类型。

// 举个例子，这只是一个示意
const PatchFlags = {
  TEXT: 1,      // 动态文本
  CLASS: 2,     // 动态 class
  STYLE: 4,     // 动态 style
  // ... 其他类型
}

有了这个标志，编译器生成的虚拟 DOM 节点就会携带额外信息：

// 编译后生成的 VNode 示意
const vnode = {
  tag: 'div',
  children: [
    { tag: 'div', children: 'foo' },
    // p 标签的文本是动态的，所以有 patchFlag
    { tag: 'p', children: ctx.bar, patchFlag: PatchFlags.TEXT }
  ]
}

这还不够。为了彻底跳过静态节点，Vue 3 引入了 Block 的概念。一个 Block 本质上也是一个虚拟节点，但它多了一个 dynamicChildren 属性，专门用来存放它内部所有的动态子孙节点。

// 带有 Block 的 VNode 示意
const vnode = {
  tag: 'div',
  // ... 其他属性
  // Block 会把所有动态子孙节点“拍平”收集起来
  dynamicChildren: [
    { tag: 'p', children: ctx.bar, patchFlag: PatchFlags.TEXT }
  ]
}

这样一来，更新时就发生了质变：渲染器不再遍历 children 数组，而是直接找到 dynamicChildren 数组，只更新这里面的节点。这就实现了从“地毯式搜索”到“精准打击”的飞跃。

同时，因为每个动态节点都有 patchFlag，我们甚至可以做到更精细的更新。比如一个节点的 patchFlag 是 1（TEXT），那我们只更新它的文本内容，连 class 和 style 都不用去管。

那么，如何实现动态节点的收集呢？

这得益于渲染函数中 createVNode 和 createBlock 函数的执行顺序。它们是嵌套调用的，执行时总是“由内向外”。Vue 内部维护一个栈（stack），每当要创建一个 Block 时，就调用 openBlock() 在栈里创建一个新的动态节点收集篮子；当 Block 创建完毕，就调用 closeBlock()。在这期间，所有被创建的、带有 patchFlag 的动态节点都会被自动放进当前的篮子里。

#应对结构变化：Block 树

你可能会问，如果模板结构本身会变怎么办？比如用了 v-if 或 v-for。

<div>
  <section v-if="foo">
    <p>{{ a }}</p>
  </section>
  <div v-else>
    <p>{{ a }}</p>
  </div>
</div>

如果只有最外层的 div 是一个 Block，当 foo 的值从 true 变为 false 时，dynamicChildren 收集到的动态节点 p 标签看起来没变，但它的父级从 section 变成了 div。这种结构性变化会被忽略，导致 bug。

解决方案很简单：让带有 v-if、v-for** 这种结构化指令的节点也成为 Block。**

这样就形成了一棵“Block 树”。父 Block 不仅收集动态节点，也收集子 Block。当 v-if 的条件变化时，父 Block 知道它需要用一个新的 Block（v-else 对应的 Block）去替换旧的 Block（v-if 对应的 Block），从而正确地更新 DOM 结构。

对于 v-for，情况类似。它会被看作一个 Fragment 类型的 Block。但 v-for 循环出的列表长度和顺序可能是不稳定的，这种情况下，Vue 会智能地回退到传统的 Diff 算法来处理这个 Fragment 内部的子节点，以保证正确性。这是一种在性能和灵活性之间的明智权衡。

#更多优化“组合拳”

除了 Block 和 patchFlag 这套核心机制，Vue 3 的编译器还打出了一套漂亮的优化“组合拳”。

#1. 静态提升 (Static Hoisting)

如果一个节点完完全全是静态的，那它在每次重新渲染时都没必要被重新创建。

<div>
  <p>这是一个纯静态的段落</p>
  <p>{{ title }}</p>
</div>

Vue 会把那个纯静态的 <p> 标签对应的虚拟节点提升到渲染函数外部，变成一个常量。之后每次渲染，都直接复用这个常量，既省去了创建对象的开销，也减少了内存占用。

// 编译结果示意
const hoist1 = createVNode('p', null, '这是一个纯静态的段落')

function render() {
  return (openBlock(), createBlock('div', null, [
    hoist1, // 直接复用
    createVNode('p', null, ctx.title, PatchFlags.TEXT)
  ]))
}

甚至，对于动态节点上的静态属性（如 <p :class="dynCls" id="static-id">），这个静态的 id 属性对象也会被提升。

#2. 预字符串化 (Pre-stringification)

这是静态提升的“威力加强版”。如果有一大长串连续的静态节点，Vue 会把它们直接序列化成一个 HTML 字符串。

// 编译结果示意
const hoistStatic = createStaticVNode('<p>...</p><div>...</div><span>...</span>')

function render() {
  return (openBlock(), createBlock('div', null, [
    hoistStatic
    // ... 其他动态节点
  ]))
}

渲染时，这个 StaticVNode 会通过 innerHTML 一次性插入 DOM，这比一个个创建 VNode 和 DOM 元素要快得多，尤其是在静态内容繁多的页面。

#3. 缓存内联事件处理函数

看下面这个例子：

<Comp @change="() => a + b" />

每次重新渲染，() => a + b 都会创建一个全新的函数。这会导致 Comp 组件接收到的 onChange prop 永远是新的，从而触发不必要的子组件更新。

Vue 3 会巧妙地缓存这个内联函数。

// 编译结果示意
function render(ctx, cache) {
  return h(Comp, {
    onChange: cache[0] || (cache[0] = ($event) => (ctx.a + ctx.b))
  })
}

cache 是一个与组件实例绑定的数组。第一次渲染时创建函数并存入 cache[0]，后续渲染直接从缓存读取。这样，Comp 组件收到的 onChange prop 始终是同一个函数引用，避免了无谓的更新。

#4.v-once：你的性能“后悔药”

v-once 指令可以让你手动控制某部分模板只渲染一次，之后即使数据变化也被视为静态内容。

<div v-once>{{ aConstValue }}</div>

它有两个好处：

1. 它对应的虚拟 DOM 会被缓存，避免了重新创建的开销。
2. 它会被标记为静态，因此父级 Block 在收集动态节点时会直接跳过它，从而在更新阶段也免去了 Diff 的开销。